<template>
  <div>
    <div ref="vantaRef" style="width: 100%; height: 100vh" class="flex_row" @click="toLogin">
      <div class="flex_column">
        <div>
          <h1 style="color: white">&nbsp;&nbsp;&nbsp; @ HJZ</h1>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as THREE from 'three'//导入样式
import BIRDS from 'vanta/src/vanta.halo'//导入动态样式逻辑
export default {
  name: "welcome",
  methods: {
    toLogin() {
      this.$router.push("/login")
    },
  },
  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE
    })
    // 修改颜色时 cells 需要全大写字母 可生效
    VANTA.HALO({
      el: this.$refs.vantaRef,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      amplitudeFactor: 2.30,
      xOffset: 0.12,
      size: 2.00
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  },
}
</script>

<style scoped>
.flex_column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex_row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>